<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>用户选角色</title>
	<link rel="stylesheet" type="text/css" href="/admin/css/bootstrap.min.css"/>
	<link rel="stylesheet" type="text/css" href="/admin/css/bootstrap-table.min.css"/>
	<link rel="stylesheet" type="text/css" href="/admin/css/style.min.css"/>
	<link rel="stylesheet" type="text/css" href="/admin/css/font-awesome.css"/>
	<link rel="stylesheet" href="/admin/layui/css/layui.css">

	<script src="/admin/js/jquery-3.3.1.min.js"></script>
	<script src="/admin/js/bootstrap.js"></script>
	<script src="/admin/js/bootstrap-table.js" type="text/javascript" charset="utf-8"></script>
	<script src="/admin/js/bootstrap-table-zh-CN.js"></script>
	<script src="/admin/layui/layui.js" charset="utf-8"></script>
	<script src="/admin/js/base.js" charset="utf-8"></script>

	<!-- 树 -->
	<link rel="stylesheet" href="/lib/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
	<script type="text/javascript" src="/lib/zTree/js/jquery.ztree.core-3.5.js"></script>
	<script type="text/javascript" src="/lib/zTree/js/jquery.ztree.excheck-3.5.js"></script>
	<script type="text/javascript" src="/lib/zTree/js/jquery.ztree.exedit-3.5.js"></script>
	<script src="/admin/js/api.js" charset="utf-8"></script>
	<script src="/admin/js/common.js" charset="utf-8"></script>
	<script src="/admin/js/tree.js" charset="utf-8"></script>

	<style>
		.ztree li span[id^="treeDemo_"][id$="_span"] {
			width: auto;
			min-width: 140px;
		}
		.ztree li a {
			width: 85%;
		}
		.layui-form-label {
			width: 80px;
		}
		.layui-input-block {
			margin-left: 80px
		}
		.fixed-table-pagination {
			width: 62%;
		}

	</style>

</head>
<body>
<div class="rigthContent">
	<div class="col-sm-12">

		<!--字典树相关-->
		<div class="col-sm-4" style="border-right: 1px solid #CCCCCC;">
			<div class="tool_bar" id="first_tool_bar" style="padding: 8px 0 0px 4px;">
				<a href="javascript:;" id="expandAllBtn" class="btn btn-default btn-sm">
					<span class="icon icon-double-angle-down handle_ioc"></span>
					展开
				</a>
				<a href="javascript:;" id="resetBtn" class="btn btn-default btn-sm">
					<span class="icon icon-double-angle-up handle_ioc"></span>
					收起
				</a>
			</div>
			<div class="pageContent" id="pageContent">
				<div class="manageeditdiv">
					<ul id="treeDemo" class="ztree" style="-moz-user-select: none;">
					</ul>
				</div>
			</div>
		</div>
		<div class="col-sm-8">
			<div class="ibox float-e-margins">
				<div class="search-top" >
					<div class="layui-form-item" id="">
						<div class="layui-form-item">
							<div class="layui-inline width-50">
								<label class="layui-form-label">授权账号：</label>
								<div class="layui-input-inline">
									<input name="account" id="account" class="form-control input-sm" disabled="disabled" style="width:220px;">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="content">
				<div>
					<table class="table" id="table_list" aria-describedby="editable_info" style="table-layout:fixed"></table>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
<script>
	var userId = getParam("userId");//主键
	var code = getParam("code");
	var account = getParam("account");

	var rMenu, zTree;
	var curStatus = "init", curAsyncCount = 0, asyncForAll = false, goAsync = false;

	layuiReady (function() {

	});

	var setting = {
		async: {
			enable: true,
			url:Url.creatUrl(Api.admin.base.roleUser.getAuditRoleTree, {userId: userId, code: code}),
			autoParam:["id"],
			dataFilter: function(treeId, parentNode, childNodes){
				if (!childNodes) return null;
				return childNodes;
			}
		},
		check: {
			enable: true,
			chkboxType: { "Y" : "ps", "N" : "s" },
			autoCheckTrigger: true
		},
		callback: {
			beforeCheck: function(treeId, treeNode) {
				if (treeNode.checked) {
					return uncheckedNode(treeNode.id);
				} else {
					return checkedNode(treeNode.id);
				}
			},
			beforeAsync: beforeAsync,
			onAsyncSuccess: onAsyncSuccess,
			onAsyncError: onAsyncError
		},
		view: {
			addDiyDom: function(treeId, treeNode) {

				$("#treeDemo li").hover(function(){
					$(this).addClass("hover")
				},function(){
					$(this).removeClass("hover")
				})

			}
		}
	};

	function uncheckedNode(treeId) {
		var params = {
			roleId: treeId,
			userId: userId
		};
		var data = This.jqueryAjax(Api.admin.base.roleUser.removeRoleUser, params);
		if (data.status == 1) {
			layer.msg(data.message, {icon:1});
			initTableSearch();
			return true;
		} else {
			layer.msg(data.message, {icon:2});
			return false;
		}
	}

	function checkedNode(treeId) {
		var params = {
			roleId: treeId,
			userId: userId
		};
		var data = This.jqueryAjax(Api.admin.base.roleUser.addRoleUser, params);
		if (data.status == 1) {
			layer.msg(data.message, {icon:1});
			initTableSearch();
			return true;
		} else {
			layer.msg(data.message, {icon:2});
			return false;
		}
	}

	function beforeAsync() {
		curAsyncCount++;
	}
	var isFirst = true;
	function onAsyncSuccess(event, treeId, treeNode, msg) {
		curAsyncCount--;
		if (curStatus == "expand") {
			expandNodes(treeNode.children);
		} else if (curStatus == "async") {
			asyncNodes(treeNode.children);
		}

		if (curAsyncCount <= 0) {
			if (curStatus != "init" && curStatus != "") {
				$("#demoMsg").text((curStatus == "expand") ? demoMsg.expandAllOver : demoMsg.asyncAllOver);
				asyncForAll = true;
			}
			curStatus = "";
		}

		if (isFirst) {
			//获得树形图对象
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			//获取根节点个数,getNodes获取的是根节点的集合
			var nodeList = zTree.getNodes();
			//展开第一个根节点
			zTree.expandNode(nodeList[0], true);
			//当再次点击节点时条件不符合,直接跳出方法
			isFirst= false;
		}
	}

	function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
		curAsyncCount--;

		if (curAsyncCount <= 0) {
			curStatus = "";
			if (treeNode!=null) asyncForAll = true;
		}
	}


	function expandAll() {
		if (!check()) {
			return;
		}
		var zTree = $.fn.zTree.getZTreeObj("treeDemo");
		if (asyncForAll) {
			//$("#demoMsg").text(demoMsg.expandAll);
			zTree.expandAll(true);
		} else {
			expandNodes(zTree.getNodes());
			if (!goAsync) {
				//$("#demoMsg").text(demoMsg.expandAll);
				curStatus = "";
			}
		}
	}
	function expandNodes(nodes) {
		if (!nodes) return;
		curStatus = "expand";
		var zTree = $.fn.zTree.getZTreeObj("treeDemo");
		for (var i=0, l=nodes.length; i<l; i++) {
			zTree.expandNode(nodes[i], true, false, false);
			if (nodes[i].isParent && nodes[i].zAsync) {
				expandNodes(nodes[i].children);
			} else {
				goAsync = true;
			}
		}
	}

	function reset() {
		if (!check()) {
			return;
		}
		asyncForAll = false;
		goAsync = false;
		$("#demoMsg").text("");
		$.fn.zTree.init($("#treeDemo"), setting);
	}
	function check() {
		if (curAsyncCount > 0) {
			$("#demoMsg").text(demoMsg.async);
			return false;
		}
		return true;
	}

	$(document).ready(function(){
		$.fn.zTree.init($("#treeDemo"), setting);
		zTree = $.fn.zTree.getZTreeObj("treeDemo");
        // 加载layui模块
        layuiReady (function() {
            _loadingClose();
        });

		$("#expandAllBtn").bind("click", expandAll);
		$("#resetBtn").bind("click", reset);

		$("#account").val(account);
		//处理左侧树高度及滚动条信息
		var minHeight = $(window).height();
		$("#pageContent").css({"height":minHeight-35,"overflow-y":"auto"})
		rMenu = $("#rMenu");
		initTable();

	});
	//初始化数据
	function initTable(){
		init_table( Url.creatUrl(Api.admin.base.roleUser.getRoleUserListByUserId, {userId: userId}), conlums);
	}

	//刷新数据列表
	function initTableSearch(){
		init_table_search();
	}

	conlums = [{
		field: 'check',
		checkbox: true,
		width: '0',
		class: 'tableCheckStatus',
	}, {
		field: 'Number',class: 'tableNumber',//可不加
		title: '序号',
		align: 'center',
		valign: 'top',
		width: '30px',
		formatter: function (value, row, index) {
			return tableNumber(index);
		}
	}, {
		field: 'name',
		title: '拥有的角色',
		align: 'center',
		width: '100'
	}, {
		field: 'remark',
		title: '备注',
		align: 'center',
		width: '100',
		class: 'over_hidden'
	}];

</script>
</html>